/**
 * @author v.lugovksy
 * created on 16.12.2015
 */
(function () {
    'use strict';

    angular.module('KingAdmin.pages.pdev')
        .directive('lineCharts', lineCharts);

    /** @ngInject */
    function lineCharts() {
        return {
            restrict: 'EA',
            scope: {
                chnId: '@',
                beginDate: '@',
                endDate: '@'
            },
            template: '<div>这是柱图</div>',
            controller: function ($scope, $filter, EnvdataService, ChannelService) {
                console.log($scope.chnId);

                $scope.data = {
                    title: '温度折线图',
                    legendData: ['温度'],
                    seriesName: '温度',
                    xdata: ['周一','周二','周三','周四','周五','周六','周日'],
                    ydata: [25, 34, 23, 34, 15, 25, 22],
                };

                // $scope.chnId = '09c1f7ea2f1641b68d93ed959d7ff6be';
                if ($scope.beginDate == null) {
                    var today = new Date();
                    $scope.beginDate = $filter('date')(today, 'yyyy-MM-dd');
                    console.log($scope.beginDate);
                }

                ChannelService.getInfo({id: $scope.chnId}, function (data) {
                    $scope.channel = data;
                    console.log($scope.channel);

                    // 获取传感器数据
                    EnvdataService.getList(
                        {channelId: $scope.chnId, beginDate: $scope.beginDate, endDate: $scope.endDate}, function (data) {
                            $scope.data = {
                                title: $scope.channel.name + '折线图',
                                legendData: [$scope.channel.name],
                                seriesName: $scope.channel.name,
                                xdata: data.result.xdata,
                                ydata: data.result.ydata,
                            };
                            console.log(data);
                        })
                })
            },
            link: function (scope, element, attr) {
                console.log("fukkk-=-===================");

                var chart = element.find('div')[0];
                var parent = element[0];
                chart.style.width = parent.clientWidth + 'px';
                chart.style.height = parent.clientHeight + 'px';

                console.log(scope.data);

                var myChart = echarts.init(chart, 'macarons');
                // var option = {
                //     title: {
                //         text: scope.data.title,
                //         left: 'center'
                //     },
                //     tooltip: {
                //         trigger: 'axis'
                //     },
                //     legend: {
                //         data: scope.data.legendData,
                //         x: 'left'
                //     },
                //     grid: {
                //         left: '3%',
                //         right: '4%',
                //         bottom: '3%',
                //         containLabel: true
                //     },
                //     toolbox: {
                //         feature: {
                //             saveAsImage: {}
                //         }
                //     },
                //     xAxis: {
                //         type: 'category',
                //         boundaryGap: false,
                //         data: scope.data.xdata
                //     },
                //     yAxis: {
                //         type: 'value'
                //     },
                //     series: [
                //         {
                //             name: scope.data.seriesName,
                //             type:'line',
                //             stack: '总量',
                //             data: scope.data.ydata
                //         }
                //     ]
                // };
                // myChart.setOption(option);
                // myChart.resize();

                scope.$watch('data', function (newValue, oldValue, scope) {
                    console.log(newValue);
                    console.log(oldValue);
                    console.log(scope.data);

                    var option = {
                        title: {
                            text: scope.data.title,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: scope.data.legendData,
                            x: 'left'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: scope.data.xdata
                        },
                        yAxis: {
                            type: 'value',
                            scale: true
                        },
                        series: [
                            {
                                name: scope.data.seriesName,
                                type:'line',
                                stack: '总量',
                                data: scope.data.ydata
                            }
                        ],
                        dataZoom: [
                            {
                                type: 'slider',
                                show: true,
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            }
                            ]
                    };
                    myChart.clear();
                    myChart.setOption(option);
                    myChart.resize();
                })
            }
        };
    }
})();